import React from "react";
import ReactDOM from "react-dom";
import "./home.css";
import { Layout, Menu, Icon } from "antd";
import "antd/dist/antd.css";
import { useParams } from "react-router-dom";
// 引入路由、页面和组件
// import '../../router/index'
// import Nav1 from '../home/aside/nav1'
// import Nav2 from '../home/aside/nav2'
// import Nav3 from '../home/aside/nav3'
// import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

const { Header, Sider, Content } = Layout;

class SiderDemo extends React.Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  
// class形式使用render进行渲染
  render() {
    return (
      <div>
        <Layout className="bg" key={+new Date()}>
          {/* 这个主要原因是因为没有傅容器唯一的key值，根据diff算法的原理 */}
          <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
            <div className="logo">恭王府后台</div>
            <Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
              <Menu.Item key="1">
                <Icon type="user" />
                <span>nav 1</span>
              </Menu.Item>
              <Menu.Item key="2">
                <Icon type="video-camera" />
                <span>nav 2</span>
              </Menu.Item>
              <Menu.Item key="3">
                <Icon type="upload" />
                <span>nav 3</span>
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout>
            <Header style={{ background: "#fff", padding: 0 }}>
              <Icon
                className="trigger"
                type={this.state.collapsed ? "menu-unfold" : "menu-fold"}
                onClick={this.toggle}
              />
            </Header>
            <Content
              style={{
                margin: "24px 16px",
                padding: 24,
                background: "#fff",
                minHeight: 280,
              }}
            >
              Content
              
            </Content>
          </Layout>
        </Layout>
      </div>
    );
  }
}

class Home extends React.Component {
  render() {
    return (
      <div>
        <SiderDemo />
      </div>
    );
  }
}

ReactDOM.render(<Home />, document.getElementById("root"));
export default Home;
